<template>
  <div id=Comp-container>
    <a href="#" @click="handleChange(1)" :class="{disabled:current==1}">|&lt;&lt;</a>
    <a href="#" @click="handleChange(2)">&lt;&lt;</a>
    <a href="#" v-for="item,i in dataList" :class="{active:current==i}" :key="i">{{i}}</a>
    <a href="#" @click="handleChange(3)">&gt;&gt;</a>
    <a href="#" @click="handleChange(handlePageNum)" :class="{disabled:current==handlePageNum}">&gt;&gt;|</a>
  </div>
</template>

<script>
export default {
  props:{
    current:{
      type:Number,//當前頁面
      default:3
    },
    total:{
      type:Number,//總共的數據
      default:0
    },
    visable:{
      type:Number,//可見的頁碼數
      default:10
    },
    pageData:{
      type:Number,//頁面最多展示的數據
      default:10
    },
    
  },
  computed:{
    handlePageNum(){
      return Math.ceil(this.total/this.pageData)//页面数量展示
    },

  },
  data(){
    return{
      dataList:[1,2,3,4,5,6,7]
    }
  },
  methods:{
    handleChange(value){
      this.$emit("changePage",value)
    }
  }
}
</script>

<style scope>
  #Comp-container{
    display: flex;
    justify-content: center;
    align-items: center;
  }
  #Comp-container a{
    color: brown;
    margin: 0 6px;
    text-decoration: none;
  }
  #Comp-container a:hover{
    text-decoration: underline;
  }
  #Comp-container .active{
    color: black;
  }
  #Comp-container .disabled{
    cursor: not-allowed;
  }
</style>